<template>
  <view class="container">
    <!-- 顶部选项卡 -->
    <view class="tab-bar">
      <view :class="{'tab-item': true, active: activeTab === 0}" @click="activeTab = 0">下单</view>
      <view :class="{'tab-item': true, active: activeTab === 1}" @click="activeTab = 1">店铺信息</view>
    </view>

    <view v-if="activeTab === 0" class="order-tab">
      <!-- 顶部轮播图 -->
      <swiper class="banner" autoplay circular>
        <swiper-item v-for="(item, index) in banners" :key="index">
          <image :src="item" class="banner-img" mode="aspectFill" />
        </swiper-item>
      </swiper>

      <!-- 推荐商品横滑 -->
      <view class="section-title">掌柜推荐</view>
      <scroll-view class="recommend-list" scroll-x>
        <view v-for="item in recommendList" :key="item.id" class="recommend-item">
          <image :src="item.image" class="recommend-img" mode="aspectFill" @click="showItemDetail(item)" />
          <view class="recommend-name">{{ item.name }}</view>
          <view class="recommend-price goods-price">￥{{ item.price }}</view>
          <view class="cart-btn" @click="showItemDetail(item)">+</view>
        </view>
      </scroll-view>

      <!-- 分类和商品 -->
      <view class="goods-section">
        <scroll-view scroll-y class="category-list">
          <view 
            v-for="cate in categoryList" 
            :key="cate.id" 
            :class="{'category-item': true, active: currentCategory === cate.id}"
            @click="switchCategory(cate.id)">
            {{ cate.name }}
          </view>
        </scroll-view>

        <scroll-view scroll-y class="goods-list">
          <view v-for="item in filteredGoods" :key="item.id" class="goods-item">
            <image :src="item.image" class="goods-img" mode="aspectFill" @click.stop="showItemDetail(item)" />
            <view class="goods-info">
              <view class="goods-name">{{ item.name }}</view>
              <view class="goods-desc">{{ item.desc }}</view>
              <view class="goods-extra">
                <view class="goods-sales">已售{{ item.sales }}</view>
                <view class="goods-price">￥{{ item.price }}</view>
              </view>
              <view class="goods-cart">
                <button @click.stop="decrease(item)">-</button>
                <text class="quantity">{{ item.cartCount || 0 }}</text>
                <button @click.stop="addToCart(item)">+</button>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 店铺信息页 -->
    <view v-else class="shop-info">
      <view>店铺名称：快乐奶茶店</view>
      <view>营业时间：09:00-22:00</view>
      <view>联系电话：123-4567-890</view>
      <view>地址：城市中心商业区1号</view>
    </view>

    <!-- 底部购物车 -->
    <view class="cart-bar">
      <up-icon name="shopping-cart" size="20" color="red"></up-icon>
      <view class="cart-price">￥{{ totalPrice }}</view>
      <button class="checkout-btn">去结算</button>
    </view>

    <!-- 商品详情弹窗 -->
    <up-popup :show="showPopup" mode="bottom" border-radius="20">
      <view class="popup-content">
        <swiper class="popup-banner" autoplay circular>
          <swiper-item v-for="(img, idx) in currentItem?.images || [currentItem?.image]" :key="idx">
			<up-image :src="img" class="popup-img" mode="aspectFit"></up-image>
          </swiper-item>
        </swiper>
        <view class="popup-name">{{ currentItem?.name }}</view>
        <view class="popup-desc">{{ currentItem?.desc }}</view>
        <view class="popup-price goods-price">￥{{ currentItem?.price }}</view>

        <view class="popup-cart">
          <button @click="decrease(currentItem)">-</button>
          <text class="quantity">{{ currentItem?.cartCount || 0 }}</text>
          <button @click="addToCart(currentItem)">+</button>
        </view>

        <button class="add-cart-btn" @click="addToCart(currentItem)">加入购物车</button>
        <view class="popup-close" @click="showPopup = false">×</view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, computed ,onMounted} from 'vue';

const activeTab = ref(0);
const banners = [
  'https://source.alipay168.cn/xcx996_2020073021305613e1c5756.jpg',
  'https://source.alipay168.cn/xcx996_2020073021305613e1c5756.jpg'
];

const recommendList = ref([
  { id: 1, name: '茉莉雪芽鲜奶茶', price: 16, image: 'https://source.alipay168.cn/skushop/c2083e53b54056d22c9472c17253fd18.png' },
  { id: 2, name: '潮汕特色鱼饼', price: 13, image: 'https://source.alipay168.cn/skushop/c2083e53b54056d22c9472c17253fd18.png' },
  { id: 3, name: '法式大薯条', price: 14, image: 'https://source.alipay168.cn/skushop/c2083e53b54056d22c9472c17253fd18.png' },
  { id: 4, name: '手打柠檬茶', price: 18, image: 'https://source.alipay168.cn/skushop/c2083e53b54056d22c9472c17253fd18.png' },
  { id: 5, name: '香煎鸡翅', price: 20, image: 'https://source.alipay168.cn/skushop/c2083e53b54056d22c9472c17253fd18.png' },
]);

const categoryList = ref([
  { id: 1, name: '热销' },
  { id: 2, name: '新品' },
]);

const goodsList = ref([
  { id: 1, name: '招牌水果捞', desc: '鲜果搭配', sales: 56, price: 22, image: 'https://source.alipay168.cn/skushop/c2083e53b54056d22c9472c17253fd18.png', categoryId: 1, cartCount: 0 },
  { id: 2, name: '大满贯牛乳创冰', desc: '口感醇厚', sales: 30, price: 20, image: 'https://source.alipay168.cn/skushop/c2083e53b54056d22c9472c17253fd18.png', categoryId: 1, cartCount: 0 },
  { id: 3, name: '芒果双拼', desc: '清爽可口', sales: 10, price: 19, image: 'https://source.alipay168.cn/skushop/c2083e53b54056d22c9472c17253fd18.png', categoryId: 2, cartCount: 0 },
  { id: 4, name: '榴莲班戟', desc: '新鲜出炉', sales: 8, price: 25, image: 'https://source.alipay168.cn/skushop/c2083e53b54056d22c9472c17253fd18.png', categoryId: 2, cartCount: 0 },
]);

const currentCategory = ref(1);
const totalPrice = ref(0);
const showPopup = ref(false);
const currentItem = ref(null);
onMounted(() => {
	console.log('onMounted')
  
});
const filteredGoods = computed(() => goodsList.value.filter(item => item.categoryId === currentCategory.value));

function switchCategory(id) {
  currentCategory.value = id;
  uni.showToast({ title: `切换到${categoryList.value.find(c => c.id === id)?.name}`, icon: 'none' });
}

function addToCart(item) {
  item.cartCount = (item.cartCount || 0) + 1;
  calcTotal();
}

function decrease(item) {
  if (item.cartCount > 0) {
    item.cartCount--;
    calcTotal();
  }
}

function calcTotal() {
  totalPrice.value = goodsList.value.reduce((sum, item) => sum + (item.price * (item.cartCount || 0)), 0);
}

function showItemDetail(item) {
	console.log(item)
  currentItem.value = item;
  showPopup.value = true;
  console.log(showPopup)
}
</script>

<style scoped>
.container { padding-bottom: 100rpx; background: #f5f5f5; min-height: 100vh; }
.tab-bar { display: flex; height: 100rpx; background: #fff; }
.tab-item { flex: 1; text-align: center; line-height: 100rpx; font-size: 32rpx; }
.tab-item.active { font-weight: bold; border-bottom: 4rpx solid #f90; }
.banner { height: 300rpx; }
.banner-img { width: 100%; height: 100%; }
.section-title { margin: 20rpx; font-size: 34rpx; font-weight: bold; }
.recommend-list { white-space: nowrap; padding: 0 20rpx; }
.recommend-item { display: inline-block; width: 200rpx; background: #fff; margin-right: 20rpx; padding: 10rpx; border-radius: 10rpx; text-align: center; }
.recommend-img { width: 100%; height: 150rpx; border-radius: 8rpx; }
.goods-section { display: flex;margin-top:20rpx }
.category-list { width: 200rpx; background: #fff; }
.category-item { padding: 30rpx 0; text-align: center; font-size: 30rpx;border-bottom:2px solid #8080801f }
.category-item.active { color: #f90; font-weight: bold; }
.goods-list { flex: 1; background: #f5f5f5; }
.goods-item { display: flex; padding: 20rpx; background: #fff; margin-bottom: 10rpx; }
.goods-img { width: 160rpx; height: 160rpx; border-radius: 10rpx; }
.goods-info { flex: 1; margin-left: 20rpx; position: relative; }
.goods-name { font-size: 30rpx; font-weight: bold; margin-bottom: 10rpx; }
.goods-desc { color: #999; font-size: 24rpx; margin-bottom: 10rpx; }
.goods-extra {  justify-content: space-between; margin-bottom: 10rpx; font-size: 24rpx; }
.goods-price{ color: red;}
.goods-cart { display: flex; align-items: center; position: absolute; bottom: 10rpx; right: 10rpx; }
.goods-cart button { width: 40rpx; height: 40rpx; border: none; background: #f90; color: #fff; border-radius: 50%; }
.goods-cart .quantity { margin: 0 10rpx; font-size: 26rpx; }
.cart-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 100rpx; background: #fff; display: flex; align-items: center; padding: 0 20rpx; box-shadow: 0 -2rpx 8rpx rgba(0,0,0,0.1); }
.cart-icon { width: 60rpx; height: 60rpx; }
.cart-price { flex: 1; font-size: 36rpx; font-weight: bold; margin-left: 20rpx; }
.checkout-btn { background: #f90; color: #fff; padding: 10rpx 30rpx; border-radius: 30rpx; font-size: 28rpx; }
.popup-content { padding: 30rpx; position: relative; background-color: white;}
.popup-banner { height: 300rpx; }
.popup-img { width: 100%; height: 100%; border-radius: 20rpx; }
.popup-name { font-size: 34rpx; font-weight: bold; margin: 20rpx 0; }
.popup-desc { color: #999; margin-bottom: 20rpx; }
.popup-price { font-size: 36rpx; color: #f90; margin-bottom: 20rpx; }
.popup-cart { display: flex; justify-content: center; align-items: center; margin-bottom: 20rpx; }
.popup-cart button { width: 60rpx; height: 60rpx; background: #f90; color: #fff; border-radius: 50%; font-size: 30rpx; }
.popup-cart .quantity { margin: 0 20rpx; font-size: 30rpx; }
.add-cart-btn { width: 100%; background: #f90; color: #fff; padding: 20rpx; border-radius: 50rpx; font-size: 32rpx; text-align: center; }
.popup-close { position: absolute; right: 20rpx; top: 20rpx; font-size: 50rpx; color: #999; }
.popup-content {
  z-index: 9999;
}
</style>



